<template>
    <div>
        <div id="header">
            <header>
                <i class="logo">QQ音乐</i>
                <a href="javascript:;">下载APP</a>
            </header>
            <nav>
                <router-link to="/recom">推荐</router-link>
                <router-link to="/toplist">排行榜</router-link>
                <router-link to="/search">搜索</router-link>
            </nav>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'header'
    }
</script>

<style lang="scss">
    header {
        position: relative;
        height: 44px;
        background: #31c27c;

        i {
            float: left;
            display: block;
            width: 90px;
            height: 25px;
            margin: 9px 0 0 10px;
            background-image: url('../../assets/img/logo.png');
            background-size: cover;
            background-repeat: no-repeat;
            text-indent: -9999px;
        }

        a {
            position: absolute;
            display: inline-block;
            right: 10px;
            top: 8px;
            height: 28px;
            padding: 0 12px;
            line-height: 28px;
            border-radius: 99px;
            font-size: 14px;
            background: #149c5a;
            color: #fff;
        }
    }
    nav {
        display: flex;
        background-color: #fff;
    }
    nav a {
        flex: 1;
        position: relative;
        display: block;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        text-align: center;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.6);
    }
    nav a.router-link-active {
        color: #31c27c;
    }
    nav a.router-link-active:after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #31c27c;
    }
</style>